import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
import fetch from '@/utils/fetch.js';
import AreaList from './AreaList'

export class ListPage extends Component {
  constructor() {
    super();
    this.state = {
      cinemas: []
    };
  }

  static propTypes = {
    cinema: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };
  
  componentDidMount() {
  	fetch('/cinema',null,res=> {
      this.setState({
        msg: '完成',
        cinemas: res.cinemas
      })
    })
  }

  render() {
    return (
      <div className="cinema-list-page">
       <AreaList cinemas={this.state.cinemas}/>
      </div>
    );
  }
}

/* istanbul ignore next */
function mapStateToProps(state) {
  return {
    cinema: state.cinema,
  };
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ListPage);
